<template>
  <div>
    <div class="share-title share-title-line">分享到以下平台</div>
      <ul class="list_box">
        <li class="list_item" @click="share(0)">
          <div class="outer_circle">
            <span class="iconfont">&#xe6ea;</span>
          </div>
          <div class="list_text">微信</div>
        </li>
        <li class="list_item" @click="share(1)">
          <div class="outer_circle">
            <span class="iconfont">&#xe610;</span>
          </div>
          <div class="list_text">QQ</div>
        </li>
        <li class="list_item" @click="share(2)">
          <div class="outer_circle">
            <span class="iconfont">&#xe60c;</span>
          </div>
          <div class="list_text">朋友圈</div>
        </li>
        <li class="list_item" @click="share(3)">
          <div class="outer_circle">
            <span class="iconfont">&#xe666;</span>
          </div>
          <div class="list_text">QQ空间</div>
        </li>
        <li class="list_item" @click="share(4)" id="copy_text" :data-clipboard-text="this.info.ios_url">
          <div class="outer_circle">
            <span class="iconfont">&#xe61a;</span>
          </div>
          <div class="list_text">复制链接</div>
        </li>
      </ul>
      <p class="text_text">或保存以下二维码图片进行分享</p>
      <div class="img_box" ref="qrcode" id="qrcodeDom"></div>
      <div :class="appName === '277'?'preservation_img':'preservation_img_cat'" @click="savePic">保存图片</div>
  </div>
</template>

<script>
import NativeShare from 'nativeshare'
import Clipboard from 'clipboard'
import QRCode from 'qrcodejs2'
import {Toast} from 'vant'
import html2canvas from "html2canvas";
  export default {
    data() {
      return {
        list: [
          {text: '生成邀请函',code: '&#xe61a;'},
          {text: '微信',code: '&#xe6ea;'},
          {text: 'QQ',code: '&#xe610;'},
          {text: '朋友圈',code: '&#xe60c;'},
          {text: 'QQ空间',code: '&#xe666;'},
          {text: '复制链接',code: '&#xe61a;'},
        ],
        imgData: "",
      }
    },
    props: {
      info: {
        type: Object,
        default() {
          return {}
        }
      },
      appName: {
        type: String,
        default: null
      },
    },
    mounted () {
      this.getQrcode()
    },
    methods: {
      share(val) {
        switch (val) {
          case 0:
            this.call('wechatFriend')
            break;
          case 1:
            this.call('qqFriend')
            break;
          case 2:
            this.call('wechatTimeline')
            break;
          case 3:
            this.call('qZone')
            break;
          case 4:
            this.copyClick()
            break;
        }
      },
      call(command) {
        var nativeShare = new NativeShare()
        var shareData = {
            title: this.info.gamename,
            desc: this.info.game_description,
            // 如果是微信该link的域名必须要在微信后台配置的安全域名之内的。
            link: this.info.ios_url,
            icon: this.info.gameicon,
            // 不要过于依赖以下两个回调，很多浏览器是不支持的
            success: function() {
                Toast('分享成功')
            },
            fail: function() {
                Toast('分享失败')
            }
        }
        nativeShare.setShareData(shareData)
          try {
              nativeShare.call(command)
          } catch (err) {
              // 如果不支持，你可以在这里做降级处理
              console.log(err.message)
          }
      },
      copyClick() {
        let clipboard = new Clipboard('#copy_text')
        clipboard.on('success', e => {
          Toast('已复制到剪切板')
          clipboard.destroy() // 释放内存
        })
        clipboard.on('error', e => {
          // 不支持复制
          Toast('该浏览器不支持复制')
          clipboard.destroy() // 释放内存
        })
      },
      transQrcode(){
        let qrcode=new QRCode('qrcodeDom',{
            width: 300,
            height:300,
            text: this.info.ios_url,  //需要转换的链接
        // render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        // background: '#f0f',   // 背景色
        // foreground: '#ff0'    // 前景色
        })
        this.createPicture()
      },
      //点击开始进行转化
      getQrcode(){  
        // console.log('url');
          this.$nextTick(()=>{
              this.transQrcode()
          })
      },
      createPicture() {
        html2canvas(this.$refs.qrcode, {
          backgroundColor: null,
          width: 200,
          height: 200,
        }).then((canvas) => {
          const imgData = canvas.toDataURL("image/jpeg");
          this.imgData = imgData;
        });
      },
      savePic(Url) {
      Url = this.imgData; //图片路径，也可以传值进来
      var triggerEvent = "touchstart"; //指定下载方式
      var blob = new Blob([""], { type: "application/octet-stream" }); //二进制大型对象blob
      var url = URL.createObjectURL(blob); //创建一个字符串路径空位
      var a = document.createElement("a"); //创建一个 a 标签
      a.href = Url; //把路径赋到a标签的href上
      //正则表达式，这里是把图片文件名分离出来。拿到文件名赋到a.download,作为文件名来使用文本
      a.download = Url.replace(/(.*\/)*([^.]+.*)/gi, "$2").split("?")[0];
      /* var e = document.createEvent('MouseEvents');  //创建事件（MouseEvents鼠标事件）
	    e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); //初始化鼠标事件（initMouseEvent已弃用）*/
      var e = new MouseEvent(
        "click",
        (true,
        false,
        window,
        0,
        0,
        0,
        0,
        0,
        false,
        false,
        false,
        false,
        0,
        null)
      );
      //派遣后，它将不再执行任何操作。执行保存到本地
      a.dispatchEvent(e);
      //释放一个已经存在的路径（有创建createObjectURL就要释放revokeObjectURL）
      URL.revokeObjectURL(url);
    },
    },
  }
</script>

<style scoped>
.share-title {
  padding: 50px 0 30px 0;
  text-align: center;
  font-size: 30px;
  color: #666;
}

.share-title-line {
  border-top: 1px solid rgb(206, 206, 206);
}

.list_box {
  width: 680px;
  box-sizing: border-box;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid rgb(206, 206, 206);
}

.list_item {
  box-sizing: border-box;
  width: 170px;
  height: 170px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 50px;
}

.outer_circle {
  padding: 0 27px;
}

.iconfont {
  display: block;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  border: 1px solid #999;
  text-align: center;
  line-height: 116px;
  font-size: 80px;
}

.list_text {
  font-size: 26px;
}

.text_text {
  font-size: 28px;
  color: #333;
  text-align: center;
  line-height: 100px;
}

.img_box {
  width: 300px;
  height: 300px;
  margin-left: 190px;
}

.preservation_img {
  width: 250px;
  height: 80px;
  margin: 40px 215px 80px;
  border: 1px solid #2F41EB;
  border-radius: 10px;
  font-size: 30px;
  color: #2F41EB;
  font-weight: bold;
  text-align: center;
  line-height: 80px;
}

.preservation_img_cat {
  width: 250px;
  height: 80px;
  margin: 40px 215px 80px;
  border: 1px solid #FF8210;
  border-radius: 10px;
  font-size: 30px;
  color: #FF8210;
  font-weight: bold;
  text-align: center;
  line-height: 80px;
}
</style>